import React from 'react'
import ReactDOM from 'react-dom'
// 引入全局样式
import './index.css'

// 导入组件
import Fnui from './组件创建/函数组件'
import Claui from './组件创建/类组件'
import Fnu from './组件创建/test'

import Index from './性能优化'

// 使用React.createElement方法创建react元素
// 子元素
const h1 = React.createElement('h1', null, 'hello react!')
const p = React.createElement('p', null, '我是P标签')
// 父元素
const div1 = React.createElement('div', { style: { color: 'red' }, className: 'test' }, h1, p, 100, 'str-child')



// 使用JSX创建react元素=>只能有一个根元素
const h2 = <h1>hello jsx!</h1>
// =>vue =>template
/**
 * 数据类型支持和使用注意
 * jsx差值表达式=》语法：{js表达式}
 * 支持的类型：单大括号中可以使用任意的 JavaScript 表达式 （值，变量，函数调用，三元运算符，数组(基本类型，jsx)）
 */
let abc = 1000, bcd = 'str', bool = false, obj = { a: 1 }
let fnc = () => {
  // 返回值
  // return 2000
  // 返回jsx模版
  return (
    <div className="test">
      <h1>200000000</h1>
    </div>
  )
}
let div2 = (
  <div className="test">
    <h1>hello jsx!</h1>
    <h2>{bcd}</h2>
    <p>我是p标签</p>
    <ul>
      <li>{abc}</li>
      <li>{12321}</li>
      <li>{'dfd'}</li>
      <li>{bool ? 100 : 200}</li>
      <li>{fnc()}</li>
      <li>{<div><h3>123</h3></div>}</li>
      <li>{[1, 2, 56]}</li>
      {/* <li>{obj}</li> */}
    </ul>
  </div>
)
/**
 * 1. 使用React.createElement方法和JSX创建react元素=》虚拟DOM
 * 2. JSX是React.createElement方法的语法糖
 */
console.log('虚拟DOM：', div1, div2)

/**
 * 条件渲染=》vue=>v-if
 */
// 数据请求状态
let isLoaded = true
let fn3 = (isLoaded) => {
  if (isLoaded) {
    return (
      <div>
        <h1>加载完成！</h1>
      </div>
    )
  } else {
    return (
      <div>
        <h2>加载中...</h2>
      </div>
    )
  }
}
const div3 = (
  <div>
    <h1>{isLoaded ? <span>加载完成了！</span> : <span>加载中...</span>}</h1>
    {
      fn3(isLoaded)
    }
  </div>
)


/**
 * 列表渲染 =》vue=》v-for
 * 没有指令=>使用数组的map方法
 */
// 假数据（后台列表数据）
const songs = [
  { id: 1, name: '野狼disco' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '桥边姑娘' },
]
let abh = 123
const lists = (
  <div>
    <h2 style={{ color: 'blue', backgroundColor: 'red', fontSize: '64px' }}>行内样式</h2>
    <div className="abc">class类名</div>
    <ul>
      {/* <li>{[1, 34, 45]}</li> */}
      {/* {[<li>1</li>, <li>2</li>, <li>3</li>]} */}
      {
        songs.map((item) => <li style={{ background: 'red', color: '#fff' }} key={item.id}>{item.name}</li>)
        // 遍历后=》[<li>野狼disco</li>, <li>像我这样的人</li>, <li>桥边姑娘</li>]
      }
      {/* {
      [<li>野狼disco</li>, <li>像我这样的人</li>, <li>桥边姑娘</li>]
    }
    {
      [<div>{abh}</div>, <div>2</div>]
    } */}
    </ul>
  </div>
)

// react 组件创建：1. 函数 2. es6的class关键字
// 1. 使用函数/箭头函数创建react组件
// - 函数组件：使用 JS 的函数（或箭头函数）创建的组件 
// - 函数体内要返回元素（jsx）
// - 渲染函数组件：用函数名作为**组件标签名** 
function Fnc (params) {
  // js逻辑
  let data = 123
  // template=>模版
  return (
    <div className="test">
      <h1>我是函数组件1</h1>
      <p>{data}</p>
    </div>
  )
}

const Fnb = () => {
  // 返回模版
  return (
    <div>
      <h2>我是函数组件2</h2>
    </div>
  )
}

// 2. 使用es6的class关键字创建类组件
// - 类组件：使用 **ES6 的 class关键字** 创建的组件 
// - 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法和属性  
// - 类里边实现父类提供的render()，返回一个模版

class Cla extends React.Component {
  // js逻辑=》vue=>script
  data = {
    a: 123
  }

  // 模版=>vue=>template
  render () {
    return (
      <div className="test">
        <h1>我是类组件</h1>
        <p>{this.data.a}</p>
      </div>
    )
  }
}

const tpl1 = (
  <div>
    <h1>渲染函数组件</h1>
    {/* 渲染函数组件 */}
    <Fnc></Fnc>
    <Fnb />
    <Cla />
    {/* 单文件组件 */}
    <Fnui />
    <Claui />
    <Fnu />
  </div>
)



// 渲染react元素或组件
ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

